<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			table {
				width: 500px;
				margin: 20px auto;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!--<tr>
					<td>1</td>
					<td>宋</td>
					<td>22</td>
					<td>女</td>
					<td>学习</td>
					<td>
						<button>上移</button>
						<button>删除</button>
						<button>下移</button>
					</td>
				</tr>-->
			</tbody>
		</table>
		<script type="text/javascript">
			var arr = [{
				id:1,
				name: "小李",
				age: 28,
				sex: "男",
				hobby: "学习"
			}, {
				id:2,
				name: "小红",
				age: 22,
				sex: "女",
				hobby: "学习"
			}, {
				id:3,
				name: "小明",
				age: 18,
				sex: "男",
				hobby: "学习"
			}, {
				id:4 ,
				name: "小美",
				age: 20,
				sex: "女",
				hobby: "学习"
			}];
			
			var tbody = document.querySelector("tbody");
			show(arr);
			function show(arr) {
				var str = "";
				for(var i = 0; i < arr.length; i++) {
					str += `
						<tr>
							<td>${i +1}</td>
							<td>${arr[i].name}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex}</td>
							<td>${arr[i].hobby}</td>
							<td>
								<button type="button" onclick="up(${i})">上移</button>
								<button type="button" onclick="del(${arr[i].id})">删除</button>
								<button type="button" onclick="down(${i})">下移</button>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML = str;
				dis();
			}
			
			//删除
			function del(id){
				for(var i=0; i<arr.length; i++){
					if(id == arr[i].id){
						arr.splice(i,1);
					}
				}
				show(arr)
			}
			//上移
			function up(i){
				if(i != 0){
					var t = arr[i];
					arr[i] = arr[i - 1];
					arr[i - 1] = t;
				}
				show(arr);
			}
			//下移
			function down(i){
				if(i < arr.length - 1){
					var t = arr[i];
					arr[i] = arr[i + 1];
					arr[i + 1] = t;
				}
				show(arr);
			}
			//禁用
			function dis(){
				var trs = document.querySelectorAll("tbody > tr");
				if(trs.length > 1){
					tbody.firstElementChild.lastElementChild.firstElementChild.disabled = true;
					tbody.lastElementChild.lastElementChild.lastElementChild.disabled = true;
				}
			}
		</script>
	</body>

</html>